<template>
	<view>
		<!-- <page-meta>
		    <navigation-bar
		      :front-color="themes.nbFrontColor"
		      :background-color="themes.nbBackgroundColor"
		    />
		</page-meta> -->
		<view class="content m-t">
			<span>新手机</span>
			<input v-model="one" class="uni-input" type="number" maxlength="11" data-key="mobile" placeholder="请输入新手机号码" />
		</view>
		<view class="content m-b">
			<span>验证码</span>
			<input v-model="two" maxlength="6" class="uni-input" type="number" placeholder="请输入验证码" />
			<button style="{borderColor:'#fa436a',color:'#fa436a' }" size="mini" plain="true" :disabled="isshow" @click="send">{{ yzm_cont }}</button>
		</view>
		<view class="footer"><button class="nextBtn" @click="next" >更换手机号</button></view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			yzm_cont: '获取验证码',
			isshow: false,
			one: '',
			two: '',
			sms:''
		};
	},
	computed: {
		
	},
	onLoad(option){
	    // this.sms = option.sms;
		if(option.data != undefined){
			this.one = this.sms = option.data
		}
	},
	methods: {
		mobileYZ(){
			if (this.one == '') {
				this.showMsg('请输入新手机号')
			}else if (this.one ==this.sms) {
				this.showMsg('不能绑定原来手机号')
			}else if (!/^1[3456789]\d{9}$/.test(this.one)) {
				this.showMsg('请输入正确的手机号')
			}else{
				
				return true;
			}
		},
		async send() {
			const data = await this.mobileYZ();
			if(data){
				this.sendSms();
			}
		},
		sendSms() {
			
			if(uni.getStorageSync('token')){
				this.$https.Mine.sendSms(this.one).then(res=>{
					this.isshow = true;
					this.time=30;
					this.yzm_cont=(this.time)+"秒后获取";
					clearInterval(this.timer);
					this.timer=setInterval(() => {
					    if(this.time<=0){
					        this.yzm_cont="获取验证码";
					        this.isshow = false;
					        clearInterval(this.timer);
					    }else{
					        this.yzm_cont=this.time+"秒后获取";
					        this.time--;
					    }
					},1000);
				})
				
			}else{
				this.$https.Mine.beforeSendSms(this.one).then(res=>{
					this.isshow = true;
					this.time=30;
					this.yzm_cont=(this.time)+"秒后获取";
					clearInterval(this.timer);
					this.timer=setInterval(() => {
					    if(this.time<=0){
					        this.yzm_cont="获取验证码";
					        this.isshow = false;
					        clearInterval(this.timer);
					    }else{
					        this.yzm_cont=this.time+"秒后获取";
					        this.time--;
					    }
					},1000);
				})
			}
			
			
		},
		async next() {
			const res = await this.mobileYZ();
			if(res){
				if (this.two == '') {
					
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return false;
				}else{
					
					if(uni.getStorageSync('tokem')){
						this.$https.Mine.checkCode(this.one,this.two).then(req => {
							return true
						})
						
					}else{
						this.$https.Mine.beforeCheckCode(this.one,this.two).then(req => {
							return true
						})
					}
					return false
				}
				this.$https.Mine.changePhone(this.one, this.two).then(res=>{
					
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta:2
						})
					}, 500);
				})
			}
		},
		showMsg(msg){
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		}
	}
};
</script>
<style lang="scss">
page {
	background: rgb(250,250,250);
}
.content {
	width: 100%;
	height: 100upx;
	background: #fff;
	padding: 20upx 32upx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28upx;
}
.content span {
	width: 180upx;
}
.content button {
	width: 162upx;
	padding: 6upx;
	height: auto;
	line-height: unset;
	color: $uni-color-error;
	border-color: $uni-color-error;
}
.content button[disabled] {
	color: $uni-color-error;
	border-color: $uni-color-error;
	opacity: 0.6;
}
.m-t {
	margin-top: 16upx;
	border-top: 2upx solid #f0f0f0;
	border-bottom: 2upx solid #f0f0f0;
}
.m-b {
	border-bottom: 2upx solid #f0f0f0;
}
.footer {
	width: 90%;
	margin: 40upx auto;
}
.nextBtn {
	color: #FFFFFF;
	background: $uni-color-error;
}
</style>
